<template>
  <div class="team-list">
    <van-search
        v-model="searchText"
        placeholder="请输入搜索关键词"
        wrap-with-form
        show-action
        @search="onSearch"
        @cancel="onCancel"
    />
  </div>
  <div style="margin-bottom: 12px">
    <van-tabs v-model:active="active" animated @change="doTagsChange">
      <van-tab name="public">
        <template #title>
          <van-icon name="friends-o" style="margin-right: 2px"/>
          公开
        </template>
      </van-tab>

      <van-tab name="secret">
        <template #title>
          <van-icon name="closed-eye" style="margin-right: 2px"/>
          加密
        </template>
      </van-tab>
    </van-tabs>
  </div>
  <team-list-card :team-list=teamList></team-list-card>
  <van-sticky :offset-bottom="80" position="bottom">
    <van-button class="add-button" icon="plus" round type="primary" @click="doCreateTeam"/>
  </van-sticky>
  <van-empty description="内容为空" v-if="teamList.length < 1 || !teamList"></van-empty>
</template>

<script setup lang="ts">
import TeamListCard from "../../components/TeamListCard.vue";
import {ref, onMounted} from "vue";
import 'vant/lib/index.css';
import {showToast} from "vant";
import {getTeamList} from "../../api/Team.ts";
import {useRouter} from "vue-router";

const router = useRouter();

const teamList = ref([]);
// 用户输入的搜索框内容
const searchText = ref('');

const DEFAULT_STATUS = 'public';
const active = ref(DEFAULT_STATUS);

// 标签状态映射
const statusMap: Record<string, number> = {
  public: 0,
  secret: 2,
};

// 钩子函数
onMounted(() => {
  const status = statusMap[active.value];
  searchTeamList('', status);
});

/**
 * 监听标签切换
 * @param name
 */
const doTagsChange = (name: string) => {
  if (name === 'public') {
    searchTeamList(searchText.value, 0);
  } else if (name === 'secret') {
    searchTeamList(searchText.value, 2);
  }
};

// 定义公用的查询列表函数
const searchTeamList = async (val = '', status: 0) => {
  const teamListResult = await getTeamList(val, status);
  // @ts-ignore
  if (teamListResult?.code === 0 && teamListResult.data) {
    teamList.value = teamListResult.data;
  } else {
    showToast("加载失败");
  }
};

// 搜索框点击搜索按钮
const onSearch = () => {
  const status = statusMap[active.value];
  searchTeamList(searchText.value, status);
};

// 搜索框点击取消按钮
const onCancel = () => {
  searchText.value = '';
};

/**
 * 创建队伍
 */
const doCreateTeam = () => {
  router.push('/team/create');
};


</script>

<style scoped>

</style>